<template>
  <!-- 顶部控制台 -->
  <div class="filter-container" v-loading="pageData.loading">
    <div class="container-layout-left">
      <el-radio class="filter-item" v-model="form.searchType" :label="1">日活统计（注册、新增、当日PV...）</el-radio>
      <span class="filter-item">数据导出日期范围</span>
      <el-date-picker
        class="filter-item"
        v-model="form.searchDate"
        type="daterange"
        :unlink-panels="pageData.unlinkPanels"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pageData.pickerOptions">
      </el-date-picker>
      <el-radio class="filter-item" v-model="form.searchType" :label="2">当次统计（勋章排名...）</el-radio>
      <el-button type="primary" icon="el-icon-search" @click="handleExportButtonClick">导出</el-button>
    </div>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import XLSX from 'xlsx';
  // 接口引入
  import { loadStatisticsExpertList } from "@/api/operation";
  export default {
    name: "statistics",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{
          loading: false,
          unlinkPanels: true,
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
        },// 页面配置数据
        form:{
          searchType: 1,
          searchDate: "",
          startDate: "",
          endDate: "",
        },// 页面表单
        formRules: {},// 表单验证
        responseData: {
          exportStatisticsDataList: [],
          exportStatisticsDataList2: []
        },// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 方法函数
      handlePageInit(){},
      handleExportButtonClick(){
        if (this.form.searchType === 1 && this.form.searchDate === ""){
          this.$message.warning('请先选择要查询的方式');
          return;
        }
        // 开启加载提示
        this.pageData.loading = true;
        // 根据筛选条件读取数据
        if (this.form.searchDate !== "" && this.form.searchDate !== "0" && this.form.searchDate != null){
          let date1 = new Date(this.form.searchDate[0]);
          this.form.startDate = date1.getFullYear()+"-"+("0"+(date1.getMonth()+1)).slice(-2)+"-"+date1.getDate();
          let date2 = new Date(this.form.searchDate[1]);
          this.form.endDate = date2.getFullYear()+"-"+("0"+(date2.getMonth()+1)).slice(-2)+"-"+date2.getDate();
        }
        this.loadStatisticsExpertList();
      },// 导出按钮点击事件
      // 接口
      loadStatisticsExpertList(){
        loadStatisticsExpertList(this.form).then(response => {
          if (response.code === "200"){
            // 关闭加载提示
            this.pageData.loading = false;
            // 判定导出方式
            if (this.form.searchType === 1){
              this.responseData.exportStatisticsDataList = response.data;
              // 导出数据统计表格
              let dataList = [];
              dataList.push(["日期", "星期", "总注册数", "新增注册(安卓)", "新增注册(苹果)", "新增注册(其它)", "当日登录", "当日PV"]);
              for (let i=0; i<this.responseData.exportStatisticsDataList.length; i++){
                let data = [];
                data.push(this.responseData.exportStatisticsDataList[i].data);
                data.push(this.responseData.exportStatisticsDataList[i].week);
                data.push(this.responseData.exportStatisticsDataList[i].registerAllCount);
                data.push(this.responseData.exportStatisticsDataList[i].registerAndroidAllCount);
                data.push(this.responseData.exportStatisticsDataList[i].registerIOSAllCount);
                data.push(this.responseData.exportStatisticsDataList[i].registerOtherAllCount);
                data.push(this.responseData.exportStatisticsDataList[i].loginCount);
                data.push(this.responseData.exportStatisticsDataList[i].pvcount);
                dataList.push(data);
              }
              setTimeout(function () {
                const ws = XLSX.utils.aoa_to_sheet(dataList);
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
                XLSX.writeFile(wb, '导出.xlsx');
              }, 800);
            } else {
              this.responseData.exportStatisticsDataList2 = response.data;
              // 导出勋章统计表格
              let dataList = [];
              dataList.push([
                "孜孜不倦(昵称)", "孜孜不倦(手机号)", "孜孜不倦(等级)",
                "见多识广(昵称)", "见多识广(手机号)", "见多识广(等级)",
                "耳听八方(昵称)", "耳听八方(手机号)", "耳听八方(等级)",
                "眼观六路(昵称)", "眼观六路(手机号)", "眼观六路(等级)",
                "勤学好问(昵称)", "勤学好问(手机号)", "勤学好问(等级)",
                "雪中送炭(昵称)", "雪中送炭(手机号)", "雪中送炭(等级)",
                "妙语连珠(昵称)", "妙语连珠(手机号)", "妙语连珠(等级)",
                "乐在其中(昵称)", "乐在其中(手机号)", "乐在其中(等级)",
                "有口皆碑(昵称)", "有口皆碑(手机号)", "有口皆碑(等级)"
              ]);
              for (let i=0; i<50; i++){
                let data = [];
                if (this.responseData.exportStatisticsDataList2.medal01[i] === null){
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal01[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal01[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal01[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal02[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal02[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal02[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal02[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal03[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal03[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal03[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal03[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal04[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal04[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal04[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal04[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal05[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal05[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal05[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal05[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal06[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal06[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal06[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal06[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal07[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal07[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal07[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal07[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal08[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal08[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal08[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal08[i].level);
                }
                if (this.responseData.exportStatisticsDataList2.medal09[i] === null) {
                  data.push("");
                  data.push("");
                  data.push("");
                } else {
                  data.push(this.responseData.exportStatisticsDataList2.medal09[i].name);
                  data.push(this.responseData.exportStatisticsDataList2.medal09[i].phone);
                  data.push(this.responseData.exportStatisticsDataList2.medal09[i].level);
                }
                dataList.push(data);
              }
              setTimeout(function () {
                const ws = XLSX.utils.aoa_to_sheet(
                  dataList
                );
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
                XLSX.writeFile(wb, '导出.xlsx');
              }, 800);
            }
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          this.$message.error(error);
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      let _this = this;
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
